<template>
  <div>
    <h2>Hello World</h2>
    <p>Igml: {{ igml }}</p>
    <p>Efgh: {{ efgh }}</p>
    <p>Abcd: {{ abcd }}</p>
    <p>Count: {{ count }}</p>
    <p>Msg: {{ msg }}</p>
    <p>DoubleCount: {{ doubleCount }}</p>
    <p>DoneTodos: {{ doneTodos }}</p>
  </div>
</template>

<script>
import { mapState } from "vuex";

export default {
  // 如下代码，没毛病，但是组件自身想写一些计算属性就没法写了，所以一般是写成 展开运算符的方式
  // computed: mapState(["count", "msg"]),

  computed: {
    ...mapState(["count", "msg"]),
    ...mapState({
      // key - 表示当前组件的自定义计算属性
      // value - 字符串的写法，匹配 store 中的 state 数据
      abcd: "count",

      // key - 表示当前组件的自定义计算属性
      // value - 函数的写法，需要有返回值，该函数会收到 state
      efgh: (state) => state.count + 100,

      doubleCount: (state) => state.count * 2,

      igml: (state) => state.msg,

      doneTodos: (state) => state.todos.filter((item) => item.done),
    }),
    // doubleCount() {
    //   return this.count * 2;
    // },
  },
};
</script>
